<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>标准规范</title>
    <meta name="renderer" content="webkit">
    <#--   <link rel="stylesheet" href="${re.contextPath}/plugin/lay/layui/css/layui.css">-->
    <!--layui样式-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css" media="all"/>
    <!--layui-dropdown-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/layui/dropdown_2.3.3/dropdown.css">
    <!--公用样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/comment.css"/>
    <!--页面样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/style.css"/>
    <!--扩展样式-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/common/css/extended.css">
    <script type="text/javascript" src="${re.contextPath}/plugin/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.js" charset="utf-8"></script>
    <!-- 公共配置第三方组件 -->
    <script type="text/javascript">
        layui.config({
            version: false,
            debug: false,
            base: "${re.contextPath}/plugin/layui/dropdown_2.3.3/"
        })
    </script>
    <style>
        .select ul li:nth-child(4) > .ml10,
        .select ul li:nth-child(5) > .ml10 {
            margin-left: 5px;
        }

        .select ul li:nth-child(4) .money {
            width: 90%;
        }

        .select ul li:nth-child(5) .money {
            width: 71%;
        }

        .select ul li:nth-child(4) > div {
            width: 77%;
        }

        .select ul li:nth-child(4) .money > div {
            width: 48%;
        }

        .select ul li:nth-child(5) .money > div {
            width: 43%;
        }

        .select ul li:nth-child(4) .money > div input {
            width: 95%;
        }

        .select ul li:nth-child(5) .money > div input {
            width: 60%;
        }

        .layu-menu-item-wrap {
            float: none !important;
            width: 100% !important;
        }

        .screening ul li input {
            width: 65%;
            padding-left: 5%;
            border: 0;
        }

        .screening ul li > select {
            border: 1px solid #DDDDDD;
        }

        .screening .money div {
            border: 1px solid #DDDDDD;
        }
    </style>
</head>
<body>
<div class="clearfix" style="margin-top: 20px;margin-left: 30px;margin-right: 30px">
    <table id="stageList" style="height: 300px;" class="layui-hide" lay-filter="stage"
           height="300px"></table>

</div>

</div>

<style>
    /* 容器样式 */
    .whitebg {
        background-color: #fff;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .maxfont {
        font-size: 20px;
        font-weight: bolder;
        overflow: hidden;
        white-space: nowrap; /* 防止文字换行 */
        overflow: hidden; /* 隐藏溢出的内容 */
        text-overflow: ellipsis; /* 溢出部分显示为省略号 */
    }

    .fontitem {
        font-size: 18px;
        color: #0C0C0C;
    }

    .fontitemshow {
        font-size: 18px;
        overflow: hidden;
        white-space: nowrap; /* 防止文字换行 */
        overflow: hidden; /* 隐藏溢出的内容 */
        text-overflow: ellipsis; /* 溢出部分显示为省略号 */
        display: inline-block; /* 确保 span 元素可以设置宽度 */
        width: 500px;

    }

    .list-container {
        display: flex;
        align-items: flex-start;
        font-size: 20px;

    }

    /* 固定的 li 样式 */
    .fixed-li {
        position: sticky;
        left: 0;
        z-index: 1;
        margin-right: 10px;
    }

    .liui {
        display: flex;
        overflow-x: auto;
    }

    /* 基本样式 */
    .selectli {
        padding: 10px;
        cursor: pointer;
        line-height: 60px;
        min-width: 150px;
        max-width: 300px;
        min-height: 60px;
        background-color: #f9f9f9;
        transition: background-color 0.3s;
        display: inline-block;
        white-space: nowrap;
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;


    }

    .selectli:hover {
        background-color: #e0e0e0;
    }

    .selectli.active {
        border-bottom: 5px solid #0A79FF;
        color: #0A79FF;
        background-color: #d9e4ff;
    }

    /* 滚动条样式 */
    .selectli::-webkit-scrollbar {
        height: 8px;
        background-color: #f1f1f1;
    }

    .selectli::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 5px;
    }

    .selectli::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 5px;
    }

    .selectli::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    /* Firefox */
    .selectli {
        scrollbar-width: thin;
        scrollbar-color: #888 #f1f1f1;
    }

    /* IE 和 Edge */
    .selectli {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }


</Style>
<script type="text/javascript" src="${re.contextPath}/plugin/tools/tool.js"></script>

<script>

    var table, tableIns, laydate, form, layer, element;
    var defaultTabInd = 0;

    $(function () {
        layui.use(['laydate', 'table', 'form', 'layer', 'element'], function () {
            laydate = layui.laydate;
            table = layui.table;
            form = layui.form;
            layer = layui.layer;
            element = layui.element;//Tab的切换功能，切换事件监听等，需要依赖element模块
            getTable();
            // const start = '20241029';
            // const end = '20271127';
            // const mont = getMonthsBetweenKK('2024-10-29', '2025-02-27');
            // console.log(mont, "==========密码密密麻麻密密麻麻==========")
        });

    })

    function getFirstAndLastDay(yearMonth) {
        const year = parseInt(yearMonth.substring(0, 4), 10);
        const month = parseInt(yearMonth.substring(4, 6), 10) - 1; // 月份从0开始，所以需要减1

        const firstDay = new Date(year, month, 2);
        const lastDay = new Date(year, month + 1, 1);

        return {
            firstDay: firstDay.toISOString().split('T')[0],
            lastDay: lastDay.toISOString().split('T')[0]
        };
    }


    function getMonthsBetween(start, end) {
        const startDate = new Date(start.slice(0, 4), start.slice(4, 6) - 1, 1);
        const endDate = new Date(end.slice(0, 4), end.slice(4, 6) - 1, 1);

        const months = [];
        let currentDate = new Date(startDate);

        currentDate.setMonth(currentDate.getMonth() + 1);

        while (currentDate < endDate) {
            const year = currentDate.getFullYear();
            const month = String(currentDate.getMonth() + 1).padStart(2, '0');
            months.push(`${year}${month}`);
            currentDate.setMonth(currentDate.getMonth() + 1);
        }
        return months;
    }

    function getMonthsBetweenKK(startStr, endStr) {
        // 将输入的字符串转换为 Date 对象
        let startDate = new Date(startStr);
        let endDate = new Date(endStr);
        // debugger
        //
        //
        // // 确保开始时间早于结束时间
        // if (start >= end) {
        //     return [];
        // }
        //
        let months = [];
        // // 从下一个月开始
        // let current = new Date(start.getFullYear(), start.getMonth() , 0);

        while (startDate <= endDate) {
            let year = startDate.getFullYear();
            const month = String(startDate.getMonth() + 1).padStart(2, '0');
            // 将年月添加到结果数组中
            months.push(year + '' + month);
            // 增加一个月
            startDate.setMonth(startDate.getMonth() + 1)

            // 防止日期溢出，确保始终在月末
            if (startDate.getDate() !== endDate.getDate()) {
                startDate.setDate(1); // 设置为每月的第一天
            }
            // if (current.getFullYear() === end.getFullYear() && current.getMonth() === end.getMonth()) {
            //     break;
            // }
        }

        return months;
    }


    function renderDateColumn(value, status, startdate, endDate) {
        // 2014-12-01 去掉 -
        value = value.replace(/-/g, '');// 单元格的值为202412 这种到月份的
        // 获取这之间的年月
        var monthbeetwns = getMonthsBetweenKK(startdate, endDate)
        console.log(monthbeetwns, "monthbeetwns");

        startdate = startdate.replace(/-/g, '');//  20241029
        endDate = endDate.replace(/-/g, '');//  20271127
        var color='red';
         if(status=='已完成'){
             color='red';
          if (monthbeetwns.includes(value)) {
              return `  <div style="width: 100%; height: 10px; background-color: red;  overflow: hidden; ">
              </div>`;
            }
         }else if(status=='进行中'){
             color='#39A9FF'
                     if (monthbeetwns.includes(value)) {
            return `  <div style="width: 100%; height: 10px; background-color: #39A9FF;  overflow: hidden; ">
            </div>`;
        }
         }

        // var startMonth = startdate.slice(0, 4) + startdate.slice(4, 6);
        // var endMonth = endDate.slice(0, 4) + endDate.slice(4, 6);
        // if (value == startMonth) {
        //     // 获取startdate的天
        //     var startDay = Number(startdate.slice(6, 8));
        //     // 计算所在月份的天数
        //     var startDayNum = new Date(startdate.slice(0, 4), startdate.slice(4, 6), 0).getDate();
        //     // 计算百分比
        //     var percent = (startDayNum - startDay + 1) / startDayNum * 100;
        //     // 获取父级元素 设置 父级的样式
        //     console.log(this, "thsihtis ");
        //
        //
        //     // 输出百分比
        //     return "<div style='width: " + percent + "%; height: 10px; background-color:#39A9FF;  overflow: hidden; '>";
        // } else if (value == endMonth) {
        //     // 获取startdate的天
        //     var startDay = Number(endDate.slice(6, 8));
        //     // 计算所在月份的天数
        //     var startDayNum = new Date(endDate.slice(0, 4), endDate.slice(4, 6), 0).getDate();
        //     // 计算百分比
        //     var percent = (startDay) / startDayNum * 100;
        //     // 输出百分比
        //     return "<div style='width: " + percent + "%; height: 10px; background-color:#39A9FF;  overflow: hidden; '>";
        // }

        return '';

        // 计算开始时间 和结束时间
        /*        if (value < startdate) {
                    // 单元格中间显示进度条
                  return value +startdate;
                }else if(value>=startdate  && value<=endDate){
                  return `  <div style="width: 100%; height: 10px; background-color: #39A9FF;  overflow: hidden; ">
                    </div>`;
                }else{
                   return value;
                }*/
    }

    function getTable() {
        console.log(table + "table")
        var jsondata = {}
        $.ajax({
            url: '/project/projectManager/projectJd/tableHead?projectId=' + projectId + '&type=1&&fbId=' + fbId + "&xmType=" + xmType,
            data: jsondata,
            type: 'get',
            dataType: 'json',
            success: function (res) {
                console.log(res);
                if (res.flag && res.data) {
                    //设置表格:
                    //方法级渲染  初始为计划类别统计
                    tableIns = table.render({
                        id: 'stageList',
                        elem: '#stageList',
                        url: '/project/projectManager/projectJd/showNoJdStageList?projectId=' + projectId + '&type=1&&fbId=' + fbId + "&xmType=" + xmType,
                        page: false,
                        where: jsondata,
                        height: 550,
                        cols: [res.data.map(function (col) {
                            // console.log(col, "没离开的")
                            // console.log(col.field, "没离开的")
                            // console.log(col.title, "没titletitletitle离开的")
                            if (col.field.startsWith('dateStr')) {
                                col.templet = function (k) {
                                    // console.log(k, "ppppppppppp")
                                    return renderDateColumn(col.title, k.status, k.startDateStr, k.endDateStr);
                                };
                            }
                            return col;
                        })],
                        done: function (res, currentCount) {
                            // document.querySelector('#stageList').style.overflowX = 'auto
                            //td 中 属性data-field 的值以dateStr 开头的单元格 中  .layui-table-cel 类名的中的padding设置为0设置为0
                         var tds = document.querySelectorAll('td[data-field^="dateStr"]');
                            for (var i = 0; i < tds.length; i++) {
                                // 获取当前单元格的中 div
                                var div = tds[i].querySelector('div');
                                // 设置padding 为0
                                //设置 display: flex; justify-content: center; align-items: center;
                                div.style.display = 'flex';
                                div.style.justifyContent = 'center';
                                div.style.alignItems = 'center';
                                div.style.padding = '0';
                                tds[i].style.border = 'none';
                            }




                        //     var ths = document.querySelectorAll('th[data-field^="dateStr"]');
                        //     for (var i = 0; i < ths.length; i++) {
                        //         // 获取当前单元格的中 div
                        //         var div = ths[i].querySelector('div');
                        //         // 设置padding 为0
                        //         //设置 display: flex; justify-content: center; align-items: center;
                        //         div.style.display = 'flex';
                        //         div.style.justifyContent = 'center';
                        //         div.style.alignItems = 'center';
                        //         div.style.padding = '0';
                        //         tds[i].style.border = 'none';
                        //     }
                        }
                    });

                }
            }
        })
    }

    $("div[lay-event='LAYTABLE_COLS']").hide()
    $("div[lay-event='LAYTABLE_EXPORT']").hide()
    $("div[lay-event='LAYTABLE_PRINT']").hide()
    var fbId = "${fbId}"
    var type = "${type}";
    var projectId = '${projectId}';
    var xmType = '${xmType}';

    var layer;
    var form = layui.form;
    var table = null;
    var tableIns = null;
    document.onkeydown = function (e) { // 回车提交表单
        var theEvent = window.event || e;
        var code = theEvent.keyCode || theEvent.which;
        if (code == 13) {
            $(".select .select-on").click();
        }
    }
    //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
    var element, dropdown;
    layui.use(['element', 'dropdown'], function () {
        element = layui.element , dropdown = layui.dropdown;
    });
    var selectedRowId = null;
    var parentId = ''

    // layui.use('table', function () {
    //     table = layui.table;
    //     element = element;
    //     //方法级渲染
    //     stageTableIns = table.render({
    //         id: 'stageList',
    //         elem: '#stageList',
    //         url: '/project/projectManager/projectJd/showNoJdStageList?projectId='+projectId+'&type=1&&fbId='+fbId+"&xmType="+xmType,
    //         toolbar: '#stageToolbar',
    //         page:false,
    //         cols: [[
    //             // {field: 'orderNum', title: '序号', width: '70', sort: false},
    //             // {field: 'stageName', title: '项目阶段', width:'800', sort: false},
    //             // {field: 'startDateStr', title: '开始时间', width: '120', sort: false},
    //             // {field: 'endDateStr', title: '结束时间', width: '120',sort: false},
    //             // {field: 'remark', title: '操作', width: '120', toolbar: "#toolBarStage"}
    //             {field: 'orderNum', title: '序号', width: '15%', sort: false},
    //             {field: 'stageName', title: '阶段名称', width:'25%', sort: false},
    //             {field: 'startDateStr', title: '开始时间', width: '20%', sort: false},
    //             {field: 'endDateStr', title: '结束时间', width: '20%',sort: false},
    //             {field: 'status', title: '任务状态', width: '20%',sort: false,
    //          templet: function(d) {
    //                     var statusColor = '';
    //                     switch (d.status) {
    //                         case '未开始':
    //                             statusColor = 'status-not-started';
    //                             break;
    //                         case '进行中':
    //                             statusColor = 'status-in-progress';
    //                             break;
    //                         case '已完成':
    //                             statusColor = 'status-completed';
    //                             break;
    //                         default:
    //                             statusColor = '';
    //                     }
    //                     return '<span class="' + statusColor + '">' + d.status + '</span>';
    //                 }
    //             }
    //
    //         ]],
    //         done: function (res, currentCount) {
    //             //***重点***：table渲染完成后渲染element进度条
    //             element.render()
    //             //把有这个属性的 lay-event="LAYTABLE_COLS" 标签隐藏
    //             $("div[lay-event='LAYTABLE_COLS']").hide()
    //             $("div[lay-event='LAYTABLE_EXPORT']").hide()
    //             $("div[lay-event='LAYTABLE_PRINT']").hide()
    //
    //
    //         }
    //     });
    //
    //     table.on('checkbox(stage)', function (obj) {
    //         console.log(obj)
    //     });
    //     table.on('tool(stage)', function (obj) {
    //         var data = obj.data;
    //         if (obj.event === 'detailStage') {
    //             layer.alert('您所查看的项目阶段是：[<label style="color: #00AA91;">' + data.stageName + '</label>]')
    //         }
    //         if (obj.event === 'editStage') {
    //             viewEditStage(data.id,'1');
    //         }
    //         if (obj.event === 'delStage') {
    //             layer.confirm('是否确定删除[<label style="color: #00AA91;">' + data.stageName + '</label>]数据?', function () {
    //                 delStage(data.id,'1');
    //             });
    //         }
    //     })
    //     table.on('row(stage)', function (obj) {
    //         var data = obj.data;
    //
    //     });
    //     table.on('toolbar(stage)', function (obj) {
    //         switch (obj.event) {
    //             case 'addAStage':
    //
    //
    //             case 'viewstageprocess':
    //
    //
    //         }
    //         ;
    //     })
    // })


    function queryStage(type) {
        // alert(id)
        var id = id;
        var jsondata = {
            fbId: fbId,
            xmType: type
        };
        parentId = id;
        console.log(jsondata, "0000000000000000000000000");
        table.reload('stageList', {
            where: jsondata
        });
    }


    function queryMilepost(id) {
        // alert(id)
        var id = id;
        var jsondata = {
            parentId: id,
        };
        parentId = id;
        table.reload('milepostList', {
            where: jsondata
        });
    }


    function reset() {
        $('#fileName').val("");
        $('#pcId').val("");
        var jsondata = {
            fileName: "",
            pcId: ""
        };
        table.reload('projectList', {where: jsondata, cols: tableCols});
    }


    function query() {
        var fileName = $('#fileName').val();
        var pcId = $('#pcId').val();
        var jsondata = {
            fileName: fileName,
            pcId: pcId
        };
        table.reload('projectList', {where: jsondata, cols: tableCols});
    }


    function saveTableWidth() {
        //把表格的宽度设置到数组里面：
        var theTable = $(".layui-table")[0];
        var theThs = $(theTable).find('th');
        $.each(theThs, function (ind, e) {
            if (ind > 6) {
                return false;
            }
            tableCols[0][ind].width = $(e)[0].clientWidth;
        })
    }


</script>


<script type="text/html" id="status">

    {{#  if(d.status == '未开始'){ }}
    <span class="status-not-started">{{ d.status }}</span>
    {{#  } else if(d.status == '进行中'){ }}
    <span class="status-in-progress">{{ d.status }}</span>
    {{#  } else{ }}
    <span class="status-completed">{{ d.status }}</span>
    {{#  }  }}
</script>


<script type="text/html" id="datestr">
    {{#
    var date = new Date(d.startDateStr);
    var now = new Date();
    var diff = now - date;
    var days = diff / (1000 * 60 * 60 * 24);

    if (days < 7) {
    return '<span style="color: red;">' + d.startDateStr + '</span>';
    } else if (days < 30) {
    return '<span style="color: orange;">' + d.startDateStr + '</span>';
    } else {
    return '<span style="color: green;">' + d.startDateStr + '</span>';
    }
    }}
</script>


<script type="text/html" id="shbz">
    {{#  if(d.shbz == '0'){ }}
    停用
    {{#  } else if(d.shbz == '1'){ }}
    正常
    {{#  } else{ }}
    '
    <div class="layui-progress layui-progress-big" lay-showpercent="true">
        <div class="layui-progress-bar layui-bg-orange" lay-percent="222%">111111</div>
    </div><br>'

    {{#  }  }}

</script>


<script type="text/html" id="zt">
    {{#  if(d.status == '000'){ }}
    已删除
    {{#  } else if(d.status == '001'){ }}
    未提交
    {{#  } else if(d.status == '002'){ }}
    未启动
    {{#  } else if(d.status == '004'){ }}
    进行中
    {{#  } else if(d.status == '003'){ }}
    已完成
    {{#  } else if(d.status == '005'){ }}
    未已延期
    {{#  } }}
</script>


<style>
    .status-completed {
        color: red;
        background-color: #FFECED;
        padding: 2px 5px;
    }

    .status-in-progress {
        color: #45AEFF;
        padding: 2px 5px;
        background-color: #E1F5FF;
    }

    .status-not-started {
        color: green;
        padding: 2px 5px;
        background-color: #C8FF96;

    }
</style>
</body>

</html>
